<template>
  <a-row :gutter="4">
    <a-col :md="8">
      <a-card title="BOM结构">
        <a-directory-tree multiple default-expand-all @select="onSelect" @expand="onExpand">
          <a-tree-node key="0-0" title="产品A">
            <a-tree-node key="0-0-0" title="部件1" is-leaf />
            <a-tree-node key="0-0-1" title="部件2" is-leaf />
            <a-tree-node key="0-0-1" title="部件3" is-leaf>
              <a-tree-node key="0-0-1" title="零件-0001" is-leaf />
              <a-tree-node key="0-0-1" title="零件-0002" is-leaf />
              <a-tree-node key="0-0-1" title="零件-0003" is-leaf />
              <a-tree-node key="0-0-1" title="零件-0004" is-leaf />
            </a-tree-node>
            <a-tree-node key="0-0-1" title="部件4" is-leaf />
            <a-tree-node key="0-0-1" title="部件5" is-leaf />
          </a-tree-node>
          <a-tree-node key="0-0" title="产品B">
            <a-tree-node key="0-0-0" title="部件1" is-leaf />
            <a-tree-node key="0-0-1" title="部件2" is-leaf />
            <a-tree-node key="0-0-1" title="部件3" is-leaf>
              <a-tree-node key="0-0-1" title="零件-0001" is-leaf />
              <a-tree-node key="0-0-1" title="零件-0002" is-leaf />
              <a-tree-node key="0-0-1" title="零件-0003" is-leaf />
              <a-tree-node key="0-0-1" title="零件-0004" is-leaf />
            </a-tree-node>
            <a-tree-node key="0-0-1" title="部件4" is-leaf />
            <a-tree-node key="0-0-1" title="部件5" is-leaf />
          </a-tree-node>
        </a-directory-tree>
      </a-card>
    </a-col>
    <a-col :md="16">
      <a-card>
        <a-form @submit="handleSubmit" :form="form" class="form">
          <a-row :gutter="[8]">
            <a-col :lg="6" :md="8" :sm="12">
              <a-form-item>
                <a-input placeholder="请输入编码" />
              </a-form-item>
            </a-col>
            <a-col :lg="6" :md="8" :sm="12">
              <a-form-item>
                <a-input placeholder="请输入名称" />
              </a-form-item>
            </a-col>
            <a-col :lg="6" :md="8" :sm="12">
              <a-form-item>
                <a-space>
                  <a-button type="primary">查询</a-button>
                  <a-button>重置</a-button>
                </a-space>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <vxe-toolbar>
          <template #buttons>
            <a-space>
              <a-button type="primary">添加</a-button>
              <a-button>导入</a-button>
              <a-button type="danger">批量删除</a-button>
            </a-space>
          </template>
        </vxe-toolbar>
        <vxe-table ref="xTable1" border stripe height="400"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
          :row-config="{ isHover: true }" :data="tableData"
          :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
          <vxe-column type="checkbox" width="40"></vxe-column>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="子物料" title="子物料" sortable>
            <template #default="{ row }"><a href="#">{{ row.子物料 ? row.子物料 : "子物料" }}</a></template>
          </vxe-column>
          <vxe-column field="数量" title="数量" sortable show-overflow align="right"></vxe-column>
          <vxe-column field="单位" title="单位" sortable show-overflow align="center">
            <template #default="{ row }"><a-tag color="green">{{ row.单位 ? row.单位 : "EA" }}</a-tag></template>
          </vxe-column>
          <vxe-column field="操作" title="操作" fixed="right" width="150">
            <template #default>
              <a-button type="link">编辑</a-button>
              <a-button type="link" danger>删除</a-button>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
          icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
          icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
        </vxe-pager>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: 'Table',
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [
        {
          "子物料": "部件1",
          "数量": "2",
          "单位": "EA",
          "备注": "",
        },
        {
          "子物料": "部件2",
          "数量": "2",
          "单位": "EA",
          "备注": "",
        },
        {
          "子物料": "部件3",
          "数量": "2",
          "单位": "EA",
          "备注": "",
        },
        {
          "子物料": "部件4",
          "数量": "2",
          "单位": "EA",
          "备注": "",
        },
      ]
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style scoped lang="less"></style>